<template>
  <div class="home-body flex-row">
    <div class="nav-menu">
      <div class="menu-head">
        <span><svg-icon class-name="icon-size" icon-class='home-menu-tip'></svg-icon></span>
        <span style="margin-left:10px;">人资源平台</span>
      </div>
      <div class="under-line"></div>
      <el-menu
        default-active="2"
        class="el-menu-vertical-demo"
        @select="activeSelected"
        background-color="#314A63"
        text-color="#999999"
        active-text-color="#ffffff"
      >
        <el-menu-item 
        index="1" 
        >
          <i class="el-icon-menu"></i>
          <!-- <svg-icon icon-class='home-menu-tip'> -->
          <span slot="title">首页</span>
        </el-menu-item>
        <el-menu-item index="2">
          <i class="el-icon-setting"></i>
          <span slot="title">系统管理</span>
        </el-menu-item>
        <el-menu-item index="3">
          <i class="el-icon-setting"></i>
          <span slot="title">人才引荐管理</span>
        </el-menu-item>
        <el-menu-item index="4">
          <i class="el-icon-setting"></i>
          <span slot="title">成长档案管理</span>
        </el-menu-item>
        <el-menu-item index="5">
          <i class="el-icon-setting"></i>
          <span slot="title">学习中心管理</span>
        </el-menu-item>
        <el-menu-item index="6">
          <i class="el-icon-setting"></i>
          <span slot="title">办事指南管理</span>
        </el-menu-item>
        <el-menu-item index="7">
          <i class="el-icon-setting"></i>
          <span slot="title">人事制度管理</span>
        </el-menu-item>
      </el-menu>
    </div>
    <div class="section-right">
      <!-- <AritvalBar></AritvalBar> -->
      <div :is='componentName'></div>
    </div>
  </div>
</template>
<style lang="less" scoped>
@import url("~@/pagecss/home.less");
</style>
<script>
// import AritvalBar from '@/components/aritcalBar'
import growthArchives from '@/pages/growthArchives/growthArchives'
import home from '@/pages/home/home'
import personnelSystem from '@/pages/personnelSystem/personnelSystem'
import recommendation from '@/pages/recommendation/recommendation'
import studyCenter from '@/pages/studyCenter/studyCenter'
import systemControl from '@/pages/systemControl/system'
import thingsTip from '@/pages/thingsTip/thingsTip'
export default {
  components:{
    // AritvalBar,
    home,
    growthArchives,
    personnelSystem,
    recommendation,
    studyCenter,
    systemControl,
    thingsTip
  },
  data(){
    return {
      componentName:'systemControl',
      menuRout:['home','systemControl','recommendation','growthArchives','studyCenter','thingsTip','personnelSystem']
    }
  },
  methods: {
    activeSelected(key, keyPath) {
      // let {menuRout,componentName} = this;
      this.componentName = this.menuRout[key-1]
    }
  }
};
</script>